<template>
  <div class="register" ref="vantaRef">
    <div class="register_return">
      <router-link class="a" to="/">返回</router-link>
    </div>
    <div class="register_input">
      <div class="input_head">欢迎注册</div>
      <div class="input_body">
        <!--  -->
        <div class="mb-3 row">
          <label for="inputPassword" class="col-sm-2 col-form-label" >账号:</label>
          <div class="col-sm-10">
            <!-- <input type="email" class="form-control" v-model="userId" id="inputPassword"> -->
            <input type="email" class="form-control" v-model="userId" id="exampleFormControlInput1" >
          </div>
        </div>
        <!--  -->
        <div class="mb-3 row">
          <label for="input" class="col-sm-2 col-form-label">密码:</label>
          <div class="col-sm-10">
            <!-- <input type="password" class="form-control" v-model="psWord" id="inputPassword"> -->
            <input type="email" class="form-control" v-model="psWord" id="exampleFormControlInput1" >
          </div>
        </div> 
        <div class="mb-3 row">
          <label for="input" class="col-sm-2 col-form-label">确认密码:</label>
          <div class="col-sm-10">
            <!-- <input type="password" class="form-control" v-model="psWord" id="inputPassword"> -->
            <input type="email" class="form-control" v-model="ispsWord" id="exampleFormControlInput1" >
          </div>
        </div> 
        <!--  -->
        <div class="mb-3 row">
          <label for="inputPassword" class="col-sm-2 col-form-label">姓名:</label>
          <div class="col-sm-10">
            <!-- <input type="password" class="form-control" v-model="name" id="inputPassword"> -->
            <input type="email" class="form-control" v-model="userName" id="exampleFormControlInput1" >
          </div>
        </div>
        <div class="mb-3 row">
          <label for="inputPassword" class="col-sm-2 col-form-label">性别:</label>
          <div class="col-sm-10">
            <select class="form-select" v-model="gender" aria-label="Default select example" >
              <!-- <option selected></option> -->
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
          </div>
        </div>
        <div class="mb-3 row">
          <label for="inputPassword" class="col-sm-2 col-form-label">email</label>
          <div class="col-sm-10">
            <!-- <input type="password" class="form-control" v-model="email" id="inputPassword"> -->
            <input type="email" class="form-control"  v-model="email" id="exampleFormControlInput1" >
          </div>
        </div>
        <div class="mb-3 row">
          <label for="inputPassword" class="col-sm-2 col-form-label">手机号码:</label>
          <div class="col-sm-10">
            <input type="email" class="form-control"  v-model="phone" id="exampleFormControlInput1" >
          </div>
        </div>
        <!--  -->
   
      </div>
      <div class="input_bottom">
        <el-button  size="medium" @click="cancel">取消</el-button>
        <el-button  size="medium" @click="commit">提交</el-button>
      </div>
    </div>

  </div>
</template>
<script>
import * as THREE from "three";
import CELLS from "vanta/src/vanta.cells";
import { log } from 'three';
export default {
  data(){
    return{
      userId:"",
      psWord:"",
      userName:"",
      gender:"",
      email:"",
      phone:"",
      ispsWord:"",
    }
  },
  methods:{
    cancel(){

      this.userId="",
      this.psWord="",
      this.userName="",
      this.gender="",
      this.email="",
      this.phone=""
      this.ispsWord=""
    },
    commit(){
      this.axios.get('http://192.168.43.171:8081/regist', {
        params:{
                 userId:this.userId,
                 psWord:this.psWord,
                 ispsWord:this.ispsWord,
                 userName:this.userName,
                 gender:this.gender,
                 email:this.email,
                 phone:this.phone,
                }
         }).then((response)=> {
                    // console.log(response.data);
                    if (response.data.data==null) {
                      console.log(response.data);
                      this.$message({
                       message: response.data.msg,
                       type: 'warning'
                      });
                    } else  if(response.data.data) {
                      this.$router.push({
                       path:'/Login',
                       })
                      this.$message({
                     message: response.data.msg,
                      type: 'success'
                      });
                    }else{
                      this
                      this.$message({
                     message: response.data.msg,
                      type: 'warning'
                    });
                    }
                    // window.sessionStorage.setItem('token',response.data.phone)
                  }).catch(function (error) {
                    console.log(error);
                  });
    }
  },
  mounted(){
    this.vantaEffect = CELLS({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    VANTA.CELLS({
      el: this.$refs.vantaRef,
      /*以下为样式配置*/
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      color1: 0x19cfcf,
      color2: 0xcfca7e,
      size: 1.0,
      speed: 3.0,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  },
  // beforeRouteEnter:(to,from,next)=>{
  //  const ismaind=sessionStorage.getItem("ismaind")
  //  console.log(ismaind);
  //   if (ismaind==1) {
  //     next()
  //   } else {
  //     alert("没有权限")
  //   }
  // }
}
</script>


<style lang="less" scoped>
.register{
  width: 100%;
  height: 100%;
  // background-image: url("../assets/01.jpg@1280w_1l_2o_100sh.jpg");
  position: relative;
  .register_return{
    position: absolute;
    top: 2px;
    left: 5px;
   
    .a{
      font-size: 15px;
      color: #fff;
    }
  }
  .register_input{
    position: absolute;
    width: 695px;
    height: 510px;
    // background-color:rgba(255,255,255, 0.7);
    // background-color:rgba(245, 243,243,0.7 );
    // letter-spacing: 0.5em;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 30px 10px rgba(0, 0, 0,0.3);
    // 
    // background-color: #fff;
    border-style:solid;
    border-width: 0.1px;
    border-color: rgba(79, 78, 76,0.3);
    border-radius: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    .input_head{

      position: absolute;
      top: 16px;
      left: 295px;
      font-size: 24px;
    }
    .input_body{
      width: 618px;
      height: 318px;
      // background-color: pink;
      position: absolute;
      top: 63px;
      left: 41px;
      .body_input{
        margin-bottom: 29px;
        // background-color:rgba(255,255,255, 0.3);
        // background-color:rgba(245, 243,243, );
        background-color: #fff;
      }

    }
    .input_bottom{
      position: absolute;
      bottom: 25px;
      left: 263px;

    }
  }
}
</style>